<template>
	<!-- title -->
	<view
		v-if="$slots.title"
		:class="{
			'r-cell-group__title': true,
			'r-cell-group__title--inset': inset
		}"
		:style="getComponentThemeStyle"
	>
		<slot name="title"></slot>
	</view>
	<view
		v-else-if="title"
		:class="{
			'r-cell-group__title': true,
			'r-cell-group__title--inset': inset
		}"
		:style="getComponentThemeStyle"
	>
		{{ title }}
	</view>
	<!-- group -->
	<view
		:class="{
			'r-cell-group': true,
			'r-cell-group--inset': inset,
			'r-hairline--top-bottom': border && !inset
		}"
		:style="{
			...getComponentThemeStyle,
			...customStyle
		}"
	>
		<slot />
	</view>
</template>
<script setup>
import { ref, inject, provide, computed } from 'vue';
import { cloneDeep, uniqWith, isEqual } from '@/uni_modules/r-utils-common/js_sdk/index.js';
import { datas } from '../themes/index.js';
import { getComponentThemeCssVar } from '@/uni_modules/r-theme-base/js_sdk/useComponentTheme.js';

import { CONFIG_PROVIDER_KEY, CELL_GROUP_KEY } from '@/uni_modules/r-utils-constant/js_sdk/index.js';

const props = defineProps({
	// 分组标题
	title: {
		type: String,
		default: ''
	},
	//   是否展示为圆角卡片风格
	inset: {
		type: Boolean,
		default: false
	},
	//   是否显示外边框
	border: {
		type: Boolean,
		default: true
	},
	//自定义样式
	customStyle: {
		type: Object,
		default: () => {}
	},
	//主题名称
	themeName: {
		type: String,
		default: 'default'
	}
});

const componentsName = 'r-cell-group';

const themeInject = inject(CONFIG_PROVIDER_KEY, {});
const componentsThemeName = computed(()=>{
	let themeName = props.themeName;
	
	if (themeInject?.value?.themeName) {
		//传递过来的有就用传递了
		themeName = themeInject?.value?.themeName;
	}
	if (props.themeName != 'default') {
		//单独设置了组件的 就用单独设置的
		themeName = props.themeName;
	}
	
	return themeName
})

const getComponentThemeStyle = computed(() => {
	let themeName = props.themeName;

	if (themeInject?.value?.themeName) {
		//传递过来的有就用传递了
		themeName = themeInject?.value?.themeName;
	}
	if (props.themeName != 'default') {
		//单独设置了组件的 就用单独设置的
		themeName = props.themeName;
	}

	return {
		...getComponentThemeCssVar(themeName, 'r-base', datas.value),
		...getComponentThemeCssVar(themeName, componentsName, datas.value)
	};
});

const children = ref([]);
const setChildren = (v) => {
	const arr = cloneDeep([...children.value, v]);
	children.value = uniqWith(arr, isEqual);
};

provide(CELL_GROUP_KEY, {
	children,
	setChildren,
	componentsThemeName
});
</script>
<style lang="scss" scoped>
.r-cell-group {
	background: var(--r-cell-group-background);

	&--inset {
		margin: var(--r-cell-group-inset-padding);
		border-radius: var(--r-cell-group-inset-radius);
		overflow: hidden;
	}

	&__title {
		padding: var(--r-cell-group-title-padding);
		color: var(--r-cell-group-title-color);
		font-size: var(--r-cell-group-title-font-size);
		line-height: var(--r-cell-group-title-line-height);

		&--inset {
			padding: var(--r-cell-group-inset-title-padding);
		}
	}
}
</style>
